<template>
  <!-- <div class="user-form-designer"> -->
  <el-container class="template-layout">
    <el-main>
      <zz-form-designer
        ref="designerRef"
        :schema="schemaProp"
        :schemaId="schemaId"
      />
    </el-main>
  </el-container>

  <!-- </div> -->
</template>

<script setup>
import { ref, onMounted, getCurrentInstance } from "vue";
import { useRoute } from "vue-router";
import ZzFormDesigner from "@/components/zzFormDesigner/index.vue";

const { proxy } = getCurrentInstance();
const route = useRoute();
const designerRef = ref();
const schemaProp = ref(null);
const schemaId = ref("");

onMounted(async () => {
  const q = route.query || {};
  if (q.schema) {
    try {
      schemaProp.value = JSON.parse(q.schema);
    } catch {}
  } else if (q.schemaId) {
    try {
      const res = await proxy.$API.codeManagement.formSchema.queryById.get(
        q.schemaId
      );
      if (res && res.code === "01") {
        schemaProp.value = res.data.schemaJson;
        schemaId.value = q.schemaId;
      }
    } catch {}
  }
});
</script>

<style lang="less" scoped>
.user-form-designer {
  height: 100vh;
}
</style>
